<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="./js/ext/jquery3.5.1.min.js"></script>
    <script src="./js/ext/bootstrap.bundle.min.js"></script>
    <script src="./js/ext/marked.min.js"></script>
    <script src="./js/ext/highlight.min.js"></script>
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <div class="sidebarContainer">
        <div id="sidebar-index" class="sidebar-center">
            <div class="index-info">
                <div class="index-title">
                    <h1>你好</h1>
                    <h2>今天能帮你什么？</h2>
                </div>

                <div class="index-btn">
                    <!--                    <button type="button" class="btn btn-outline-info btn-sm">推荐</button>-->
                    <!--                    <button type="button" class="btn btn-outline-info btn-sm">OKR</button>-->
                </div>

                <div class="index-list">
                    <!--                <div class="index-list-item alert alert-info" >-->
                    <!--                    写一首关于智能手机的莎士比亚风格的十四行诗-->
                    <!--                </div>-->
                    <!--                <div class="index-list-item alert alert-info" >-->
                    <!--                    概述学习个人理财的初学者路线图-->
                    <!--                </div>-->
                    <!--                <div class="index-list-item alert alert-info">-->
                    <!--                    为孩子们建议10种创意万圣节服装-->
                    <!--                </div>-->
                </div>
            </div>

            <div class="msg-list" style="display: none">

            </div>

            <div class="chat-box">
                <div class="chat-tool">
                    <div class="chat-tool-left">
                        <!--                        <div class="btn-group">-->
                        <!--                            <button id="provider-list-btn" type="button" class="btn btn-sm btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">-->
                        <!--                                HyperSeek-->
                        <!--                            </button>-->
                        <!--                            <ul class="dropdown-menu" id="provider-list">-->
                        <!--                                <li><a class="dropdown-item" href="#">HyperSeek</a></li>-->
                        <!--                                <li><a class="dropdown-item" href="#">DeepSeek</a></li>-->
                        <!--                            </ul>-->
                        <!--                        </div>-->
                        <div class="btn-group">
                            <button id="agent-list-btn" type="button" class="btn btn-sm btn-warning dropdown-toggle"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                OKR-agent
                            </button>
                            <ul class="dropdown-menu" id="agent-list">
                            </ul>
                            <!--                                <ul class="dropdown-menu" id="model-list">-->
                            <!--                                    &lt;!&ndash;                            <li><a class="dropdown-item" href="#">HyperSeek</a></li>&ndash;&gt;-->
                            <!--                                    &lt;!&ndash;                            <li><a class="dropdown-item" href="#">DeepSeek</a></li>&ndash;&gt;-->
                            <!--                                </ul>-->
                        </div>
                        <div class="btn-group">
                            <button id="stop-signal-btn" type="button" class="btn btn-sm btn-info " disabled>停止</button>
                        </div>
                    </div>
                    <div class="chat-tool-right">
                        <div class="chat-tool-right-item" data-bs-toggle="tooltip" data-bs-placement="right"
                            data-bs-title="历史聊天">
                            <svg class="chat-tool-btn" id="history-btn" aria-labelledby="offcanvasBottomLabel"
                                data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom"
                                xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="M12 21q-3.32 0-5.81-2.079q-2.492-2.079-3.056-5.28q-.042-.214.093-.379q.134-.164.348-.195t.375.104t.21.348q.54 2.818 2.735 4.65T12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4Q9.639 4 7.685 5.255Q5.733 6.509 4.754 8.673h2.515q.213 0 .356.144t.144.357t-.144.356t-.356.143H4.495q-.45 0-.715-.37t-.09-.774Q4.722 6.04 6.98 4.52Q9.236 3 12 3q1.868 0 3.51.709t2.858 1.922t1.923 2.857t.709 3.509t-.709 3.51q-.708 1.643-1.923 2.859t-2.858 1.925T12 21m.5-9.208l2.5 2.52q.14.133.14.34t-.14.358t-.354.14q-.213-.01-.354-.15l-2.544-2.544q-.136-.137-.192-.28t-.056-.297V8.23q0-.213.144-.356t.357-.144t.356.144t.143.356z" />
                            </svg>
                        </div>
                        <div class="chat-tool-right-item" data-bs-toggle="tooltip" data-bs-placement="right"
                            data-bs-title="新聊天">
                            <svg class="chat-tool-btn" id="start-new-btn" xmlns="http://www.w3.org/2000/svg" width="1em"
                                height="1em" viewBox="0 0 56 56">
                                <path fill="#c026d3"
                                    d="M16.094 52.316c.937 0 1.594-.468 2.695-1.5l8.484-7.734l15.82.023c6.985.024 10.735-3.867 10.735-10.734V14.418c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96 0-10.734 3.843-10.734 10.734v17.953c0 6.89 3.773 10.734 10.734 10.711h1.102v6.82c0 1.453.773 2.414 2.086 2.414m12.047-17.32c-1.313 0-2.04-.96-2.04-2.32v-6.797h-7.1c-1.384 0-2.345-.727-2.345-2.016c0-1.36.914-2.086 2.344-2.086h7.102v-7.289c0-1.36.726-2.32 2.039-2.32c1.312 0 2.086.914 2.086 2.32v7.29h7.148c1.43 0 2.32.726 2.32 2.085c0 1.29-.937 2.016-2.32 2.016h-7.148v6.797c0 1.406-.774 2.32-2.086 2.32" />
                            </svg>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="chat-input">
                    <div class="chat-textarea">
                        <textarea placeholder="输入消息..." id="chat-input-area"></textarea>
                    </div>
                    <div class="chat-input-btn">
                        <svg id="chat-input-send-btn" xmlns="http://www.w3.org/2000/svg" width="128" height="128"
                            viewBox="0 0 24 24">
                            <path fill="#cccccc" d="M3 20v-6l8-2l-8-2V4l19 8z" />
                        </svg>
                        <!--                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">-->
                        <!--                        <path fill="currentColor" d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m7-4h8v8H8zm2 2v4h4v-4z"/></svg>-->
                    </div>
                </div>

                <!--            <button class="btn btn-primary" type="button"  aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>-->

                <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom"
                    aria-labelledby="offcanvasBottomLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasBottomLabel">历史消息 <span id="history-number"> (1)
                            </span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body small">
                        <div class="history-list"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sidebar-feedback" class="sidebar-center">
            <div class="page-title">
                <h1>反馈</h1>
            </div>
            <div class="page-content">
                <div class="feedback-form">
                    <div class="mb-3" style="margin-top: 45px">
                        <p><b>问题类型</b></p>
                        <label for="feedBackSelect" class="form-label">请选择问题类型</label>
                        <select class="form-select" id="feedBackSelect" aria-label="Default select example">
                            <!--                            <option value="1" selected>功能问题</option>-->
                            <!--                            <option value="2">功能建议</option>-->
                            <!--                            <option value="3">信息收集</option>-->
                        </select>
                    </div>

                    <div class="mb-3" style="margin-top: 45px">
                        <p><b>系统类型</b></p>
                        <label for="feedBackSystem" class="form-label">请选择所属系统</label>
                        <select class="form-select" id="feedBackSystem" aria-label="Default select example">
                        </select>
                    </div>


                    <div class="mb-3" style="margin-top: 45px">
                        <p><b>问题概要</b></p>
                        <label for="feedBackInput1" class="form-label">你遇到了什么问题？</label>
                        <input type="text" class="form-control" id="feedBackInput1" placeholder="">
                    </div>

                    <div class="mb-3" style="margin-top: 45px">
                        <p><b>详细信息</b></p>
                        <label for="feedBackInput2" class="form-label">请详细描述出了什么问题、您采取了什么操作以及您收到了什么报错信息。</label>
                        <textarea class="form-control" placeholder="" id="feedBackInput2" rows="6"></textarea>
                    </div>
                    <div class="mb-3" style="text-align: right">
                        <div id="liveAlertPlaceholder"></div>
                        <button id="feedbackFormSubmit" type="button" class="btn btn-primary">提交</button>
                    </div>

                </div>
            </div>
        </div>

        <div id="sidebar-agent" class="sidebar-center">
            <div class="page-title">
                <h1>Agent</h1>
            </div>
            <div id="sidebar-agent-list">
                <!--                <div class="agent-item">-->
                <!--                    <div class="card" style="width: 100%;">-->
                <!--                        <div class="card-body">-->
                <!--                            <h6 class="card-subtitle mb-2">Card subtitle</h6>-->
                <!--                            <p class="card-text text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="agent-item">-->

                <!--                </div>-->
            </div>
        </div>
        <div class="sidebar-right">
            <div class="right-tool-box">
                <div class="right-tool-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="聊天">
                    <svg data-type="index" class="right-tool-icon" xmlns="http://www.w3.org/2000/svg" width="1em"
                        height="1em" viewBox="0 0 24 24">
                        <path fill="#686A82"
                            d="M6.5 13.5h7v-1h-7zm0-3h11v-1h-11zm0-3h11v-1h-11zM3 20.077V4.616q0-.691.463-1.153T4.615 3h14.77q.69 0 1.152.463T21 4.616v10.769q0 .69-.463 1.153T19.385 17H6.077zM5.65 16h13.735q.23 0 .423-.192t.192-.423V4.615q0-.23-.192-.423T19.385 4H4.615q-.23 0-.423.192T4 4.615v13.03zM4 16V4z" />
                    </svg>

                </div>

                <div class="right-tool-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Agent">
                    <svg data-type="agent" class="right-tool-icon" xmlns="http://www.w3.org/2000/svg" width="1em"
                        height="1em" viewBox="0 0 24 24">
                        <g fill="none" stroke="#686A82" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="1.5" color="currentColor">
                            <path
                                d="M20.5 16.929V10c0-3.771 0-5.657-1.172-6.828S16.271 2 12.5 2h-1C7.729 2 5.843 2 4.672 3.172S3.5 6.229 3.5 10v9.5" />
                            <path d="M20.5 17H6a2.5 2.5 0 0 0 0 5h14.5" />
                            <path
                                d="M20.5 22a2.5 2.5 0 0 1 0-5m-8.192-5l-1.461-4.521A.72.72 0 0 0 10.154 7a.72.72 0 0 0-.693.479L8 12m7-5v5m-6.462-1.5h3.231" />
                        </g>
                    </svg>
                </div>

                <div class="right-tool-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="反馈">
                    <svg data-type="feedback" class="right-tool-icon" xmlns="http://www.w3.org/2000/svg" width="1em"
                        height="1em" viewBox="0 0 24 24">
                        <path fill="none" stroke="#686A82" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="1.5"
                            d="m2.357 7.714l6.98 4.654c.963.641 1.444.962 1.964 1.087c.46.11.939.11 1.398 0c.52-.125 1.001-.446 1.964-1.087l6.98-4.654M7.157 19.5h9.686c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.31-1.311c.328-.642.328-1.482.328-3.162V9.3c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311c-.642-.327-1.482-.327-3.162-.327H7.157c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.31 1.311c-.328.642-.328 1.482-.328 3.162v5.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311c.642.327 1.482.327 3.162.327" />
                    </svg>
                </div>

            </div>
            <div class="user-avatar">

                <div class="btn-group dropup">
                    <img id="user-img-outer" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"
                        src="" alt="">

                    <!--                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">-->
                    <!--                        Dropup-->
                    <!--                    </button>-->
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#" id="userName">
                                <img id="user-img" src="" alt="">
                                <span></span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                    height="1em" viewBox="0 0 24 24">
                                    <path fill="currentColor" fill-rule="evenodd"
                                        d="M12 1.25A7.75 7.75 0 0 0 4.25 9v.704a3.53 3.53 0 0 1-.593 1.958L2.51 13.385c-1.334 2-.316 4.718 2.003 5.35q1.133.309 2.284.523l.002.005C7.567 21.315 9.622 22.75 12 22.75s4.433-1.435 5.202-3.487l.002-.005a29 29 0 0 0 2.284-.523c2.319-.632 3.337-3.35 2.003-5.35l-1.148-1.723a3.53 3.53 0 0 1-.593-1.958V9A7.75 7.75 0 0 0 12 1.25m3.376 18.287a28.5 28.5 0 0 1-6.753 0c.711 1.021 1.948 1.713 3.377 1.713s2.665-.692 3.376-1.713M5.75 9a6.25 6.25 0 1 1 12.5 0v.704c0 .993.294 1.964.845 2.79l1.148 1.723a2.02 2.02 0 0 1-1.15 3.071a26.96 26.96 0 0 1-14.187 0a2.02 2.02 0 0 1-1.15-3.07l1.15-1.724a5.03 5.03 0 0 0 .844-2.79z"
                                        clip-rule="evenodd" />
                                </svg> 新功能</a>
                        </li>
                        <li><a class="dropdown-item" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="currentColor" fill-rule="evenodd"
                                        d="M12 2.75a9.25 9.25 0 1 0 0 18.5a9.25 9.25 0 0 0 0-18.5M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12S17.937 22.75 12 22.75S1.25 17.937 1.25 12M12 7.75c-.621 0-1.125.504-1.125 1.125a.75.75 0 0 1-1.5 0a2.625 2.625 0 1 1 3.96 2.26a1.9 1.9 0 0 0-.465.369c-.102.12-.12.2-.12.246V13a.75.75 0 0 1-1.5 0v-1.25c0-.506.222-.916.477-1.217c.252-.297.566-.524.845-.689A1.124 1.124 0 0 0 12 7.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
                                        clip-rule="evenodd" />
                                </svg>
                                帮助中心</a>
                        </li>
                        <li><a class="dropdown-item" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="1.5"
                                        d="m2.357 7.714l6.98 4.654c.963.641 1.444.962 1.964 1.087c.46.11.939.11 1.398 0c.52-.125 1.001-.446 1.964-1.087l6.98-4.654M7.157 19.5h9.686c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.31-1.311c.328-.642.328-1.482.328-3.162V9.3c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311c-.642-.327-1.482-.327-3.162-.327H7.157c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.31 1.311c-.328.642-.328 1.482-.328 3.162v5.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311c.642.327 1.482.327 3.162.327" />
                                </svg>
                                反馈</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">退出登录</a></li>
                    </ul>
                </div>


            </div>
        </div>
    </div>
</body>

</html>